<template>
  <div class="organizationContent-wrapper">
    <!-- 左侧 部门树 -->
    <div class="left-deptTree content-wrapper">
      <span class="title">部门选择</span>
      <dept-tree
          ref="deptTree"
          :type="0"
          :dropMenuShow="1"
          :dropMenuList="deptDropMenu"
          :propsParam="treeParam"
          @getNodeInfo="getDeptInfo"
          @menuOperations="menuOperations"
      ></dept-tree>
    </div>
    <!-- 中间 人员列表 -->
    <div class="center-userList content-wrapper">
      <div class="buttons-wrapper">
        <div class="left-buttons">
          <span class="systemButtonDelete" @click="userDelete">删除</span>
          <span class="systemButtonEdit" @click="userEdit">编辑</span>
        </div>
        <span class="systemButtonAdd right-buttons" @click="userAdd">添加人员</span>
      </div>
      <el-table
          class="systemTable"
          :data="tableData"
          ref="table"
          stripe
          tooltip-effect="dark"
          style="width: 100%"
          :row-style="rowStyle"
          @row-click="rowClick"
          @selection-change="handleSelectionChange"
      >
        <el-table-column
            type="selection"
            label-class-name="disabledSelection"
            width="50"
            header-align="center"
            align="center"
        ></el-table-column>
        <el-table-column prop="name" label="姓名" align="center" width="80" show-overflow-tooltip></el-table-column>
        <el-table-column prop="account" label="账号" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="code" label="工号" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="deptName" label="部门名称" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="phone" label="手机" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="telephone" label="电话" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="eMail" label="邮箱" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="isSealup" label="状态" align="center" show-overflow-tooltip width="80">
          <template slot-scope="scope">
            <span>{{ isSealup[scope.row.isSealup] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 右侧 部门属性 -->
    <div class="right-info devProperty-wrapper content-wrapper" v-if="deptFormShow">
      <span class="title">{{ deptForm.name }}属性</span>
      <el-form
          :class="deptOnlyRead?'deptOnlyRead systemForm':'systemForm'"
          ref="form"
          :model="deptForm"
          label-width="80px"
          label-position="left"
      >
        <el-form-item label="部门名称">
          <el-input v-model="deptForm.name" :disabled="deptOnlyRead" class="systemInput"></el-input>
        </el-form-item>
        <el-form-item label="部门编码">
          <el-input v-model="deptForm.code" :disabled="deptOnlyRead" class="systemInput"></el-input>
        </el-form-item>
        <el-form-item label="上级部门">
          <el-select
              class="systemInput"
              ref="mySelect"
              v-model="deptForm.parentDept"
              placeholder="请选择"
              :disabled="deptOnlyRead"
          >
            <el-option
                :value="null"
                style="height: 300px;background: transparent;padding: 0;overflow: auto"
            >
              <el-tree
                  style="background: transparent;font-weight: normal;"
                  :expand-on-click-node="false"
                  lazy
                  ref="tree"
                  node-key="id"
                  :props="treeProps"
                  :load="loadNode"
                  @node-click="handleNodeClick"
              ></el-tree>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机构等级">
          <el-select v-model="deptForm.grade" :disabled="deptOnlyRead" class="systemInput">
            <el-option v-for="item in gradeMap" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单位类型">
          <el-select v-model="deptForm.deptType" :disabled="deptOnlyRead" class="systemInput">
            <el-option v-for="item in deptTypeMap" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门状态">
          <el-select v-model="deptForm.isSealup" :disabled="deptOnlyRead" class="systemInput">
            <el-option
                v-for="item in isSealupMap"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="deptForm.note" :disabled="deptOnlyRead" class="systemInput"></el-input>
        </el-form-item>
      </el-form>
      <div class="buttons-wrapper" v-if="!deptOnlyRead">
        <span @click="deptCancel" class="systemButtonCancel">取消</span>
        <span @click="deptSave" class="systemButtonConfirm">保存</span>
      </div>
    </div>
    <!-- 右侧 人员属性 -->
    <div class="right-info userProperty-wrapper column content-wrapper" v-if="userFormShow">
      <span class="title">{{ userForm.name }}属性</span>
      <el-tabs v-model="activeName" @tab-click="handleClick" class="systemElTabs">
        <el-tab-pane label="常规" name="routine">
          <el-form
              class="systemForm"
              ref="form"
              :model="userForm"
              label-width="80px"
              :show-message="false"
              label-position="left"
          >
            <el-form-item label="姓名" :prop="userOnlyRead?'':'name'">
              <el-input class="systemInput" v-model="userForm.name" :disabled="userOnlyRead"></el-input>
            </el-form-item>
            <el-form-item label="账号" :prop="userOnlyRead?'':'account'">
              <el-input class="systemInput" v-model="userForm.account" :disabled="userOnlyRead"></el-input>
            </el-form-item>
            <el-form-item label="所属部门">
              <el-select
                  class="systemInput"
                  ref="myUserSelect"
                  v-model="userForm.deptName"
                  placeholder="请选择"
                  :disabled="userOnlyRead"
              >
                <el-option
                    :value="null"
                    style="height: 300px;background: transparent;padding: 0;overflow: auto;"
                >
                  <el-tree
                      style="background: transparent;font-weight: normal;"
                      :expand-on-click-node="false"
                      lazy
                      ref="tree"
                      node-key="id"
                      :props="treeProps"
                      :load="loadNode"
                      @node-click="userHandleNodeClick"
                  ></el-tree>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="工号">
              <el-input class="systemInput" v-model="userForm.code" :disabled="userOnlyRead"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input
                  class="systemInput"
                  v-model="userForm.password"
                  :disabled="userOnlyRead"
                  type="password"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码最小长度" class="multipleRows">
              <!-- <el-input-number
                v-model="userForm.pwdMinLen"
                :disabled="userOnlyRead"
                size="small"
                :precision="0"
                :controls="false"
              ></el-input-number>-->
              <el-input class="systemInput" v-model="userForm.pwdMinLen" :disabled="userOnlyRead"></el-input>
            </el-form-item>
            <el-form-item label="密码有效截止日期" class="multipleRows">
              <el-date-picker
                  class="systemInput"
                  v-model="userForm.pwdValidDate"
                  :disabled="userOnlyRead"
                  type="datetime"
                  placeholder="选择日期时间"
                  default-time="23:59:59"
                  popper-class="organizationDatePicker"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="密码有效时长" class="multipleRows">
              <el-input-number
                  class="systemInput"
                  v-model="userForm.pwdValidDays"
                  :disabled="userOnlyRead"
                  size="small"
                  :precision="0"
                  :controls="false"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input class="systemInput" v-model="userForm.eMail" :disabled="userOnlyRead"></el-input>
            </el-form-item>
            <el-form-item label="状态" :prop="userOnlyRead?'':'isSealup'">
              <el-select v-model="userForm.isSealup" :disabled="userOnlyRead" class="systemInput">
                <el-option
                    v-for="item in isSealupMap"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="手机">
              <el-input class="systemInput" v-model="userForm.phone" :disabled="userOnlyRead"></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input
                  class="systemInput"
                  v-model="userForm.telephone"
                  :disabled="userOnlyRead"
                  placeholder="格式：0575-00000000"
              ></el-input>
            </el-form-item>
            <el-form-item label="访问主机限定" class="multipleRows">
              <el-input class="systemInput" v-model="userForm.visitHost" :disabled="userOnlyRead"></el-input>
            </el-form-item>
            <el-form-item label="允许多地同时登录" class="multipleRows">
              <el-select class="systemInput" v-model="userForm.multiLogin" :disabled="userOnlyRead">
                <el-option
                    v-for="item in multiLoginMap"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="头像" class="headPic">
              <el-upload
                v-if="!userOnlyRead"
                class="avatar-uploader"
                :action="serverAPI + userForm.headPic"
                :show-file-list="false"
                :auto-upload="false"
                :on-change="changeFile"
                accept=".jpg, .jpeg, .png, .gif, .bmp, .pdf, .JPG, .JPEG, .PBG, .GIF, .BMP, .PDF"
              >
                <img v-if="headPicSrc" :src="headPicSrc" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <img
                v-if="userOnlyRead&&userForm.headPic"
                :src="serverAPI + userForm.headPic"
                class="avatar"
              />
            </el-form-item>-->
            <el-form-item label="头像" class="headPic">
              <img v-if="userForm.headPic" :src="serverAPI + encodeURI(userForm.headPic)" class="avatar"/>
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                  class="systemInput"
                  v-model="userForm.note"
                  type="textarea"
                  :disabled="userOnlyRead"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="角色" name="role">
          <div class="roleList" v-for="item in userRoleList" :key="item.id">
            <span>{{ item.name }}</span>
          </div>
        </el-tab-pane>
        <el-tab-pane label="权限" name="aut">
          <div class="autList" v-for="item in userAutList" :key="item.id">
            <div>模块：{{ item.FUNCNAME }}</div>
            <div>权限：{{ item.AUTNAMES }}</div>
            <div>角色：{{ item.ROLENAMES }}</div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="buttons-wrapper" v-if="!userOnlyRead && userButtons">
        <span @click="userCancel" class="systemButtonCancel">取消</span>
        <span @click="userSave" class="systemButtonConfirm">保存</span>
      </div>
    </div>
  </div>
</template>

<script>
import DeptTree from '@/system/components/organizationTree'
import {
  deptOrUserTree,
  deptSave,
  deptDetail,
  deptDelete,
  userList,
  userSave,
  userDetail,
  userDelete,
  userRole,
  userAut,
} from '@/system/api/organization/organization'
import {getDataTypeMap} from '@/system/api/listStructure'
import dropMenuVue from '../../components/dropMenu.vue'

export default {
  data() {
    return {
      treeParam: {
        userFlag: false,
        parentId: 0,
      },
      deptFormShow: true,
      deptOnlyRead: true,
      deptForm: {},
      currentDeptInfo: {},
      // 树 右击节点信息
      currentNode: {},
      currentNodeInfo: {},
      // 树 菜单
      deptDropMenu: [],
      // 0-新增同级 1-新增下级 2-编辑 3-删除
      operationType: '',
      // 人员 属性
      activeName: 'routine',
      userFormShow: false,
      userOnlyRead: true,
      userForm: {
        name: '',
        region: '',
      },
      userRoleList: [],
      userAutList: [],
      userButtons: true,
      // 人员 tabledata
      tableData: [],
      // 当前勾选人员
      currentUsers: [],
      isSealup: {
        0: '不可用',
        1: '可用',
      },
      isSealupMap: [
        {value: 0, label: '不可用'},
        {value: 1, label: '可用'},
      ],
      gradeMap: [
        {value: 0, label: '总部'},
        {value: 1, label: '省级单位'},
        {value: 2, label: '市级单位'},
        {value: 3, label: '县级单位'},
        {value: 4, label: '部门'},
        {value: 5, label: '班组'},
      ],
      multiLoginMap: [
        {value: 0, label: '否'},
        {value: 1, label: '是'},
      ],
      treeProps: {
        label: 'name',
        isLeaf: 'leaf',
        id: 'id',
      },
      headPicSrc: '',
      serverAPI: process.env.VUE_APP_BASE_API,
      deptTypeMap: [],
    }
  },
  components: {
    DeptTree,
  },
  mounted() {
    getDataTypeMap({name: '单位类型'}).then((res) => {
      if (res.success) {
        this.deptTypeMap = res.info
      } else this.message(res.msg, 3)
    })
  },
  methods: {
    // 部门 详情
    async getDeptInfo(e) {
      let deptInfomation = {}
      if (e.clickType) {
        // 树 左击
        this.deptOnlyRead = true
        deptInfomation = await deptDetail({id: e.id})
        this.deptFormShow = true
        this.userFormShow = false
        this.getUserList(deptInfomation.info.id)
        this.currentDeptInfo = JSON.parse(
            JSON.stringify(deptInfomation.info)
        )
        this.deptForm = JSON.parse(JSON.stringify(deptInfomation.info))
      } else {
        // 树 右击
        this.currentNode = e
        deptInfomation = await deptDetail({id: e.data.id})
        this.currentNodeInfo = JSON.parse(
            JSON.stringify(deptInfomation.info)
        )
        this.deptDropMenu = this.$store.state.user.info.flag
            ? [
              {
                index: 0,
                label: '新增同级部门',
                icon: 'icon iconfont iconzengjia',
              },
              {
                index: 1,
                label: '新增下级部门',
                icon: 'icon iconfont iconzengjia',
              },
              {
                index: 2,
                label: '编辑部门',
                icon: 'icon iconfont iconbiaoge-bianji',
              },
              {
                index: 3,
                label: '删除部门',
                icon: 'icon iconfont iconbiaoge-shanchu',
              },
            ]
            : [
              {
                index: 1,
                label: '新增下级部门',
                icon: 'icon iconfont iconzengjia',
              },
              {
                index: 2,
                label: '编辑部门',
                icon: 'icon iconfont iconbiaoge-bianji',
              },
              {
                index: 3,
                label: '删除部门',
                icon: 'icon iconfont iconbiaoge-shanchu',
              },
            ]
      }
    },
    // 部门树 新增 & 编辑 & 删除
    async menuOperations(e) {
      this.operationType = e
      switch (Number(e)) {
          // 新增同级
        case 0:
          this.deptFormShow = true
          this.userFormShow = false
          this.deptOnlyRead = false
          this.deptForm = {}
          this.deptForm.isSealup = 1
          const detail = await deptDetail({id: this.currentNode.data.id})
          this.deptForm.parentId = detail.info.parentId
          this.deptForm.parentDept = detail.info.parentDept
          break
          // 新增下级
        case 1:
          this.deptFormShow = true
          this.userFormShow = false
          this.deptOnlyRead = false
          this.deptForm = {}
          this.deptForm.isSealup = 1
          this.deptForm.parentId = this.currentNode.data.id
          this.deptForm.parentDept = this.currentNode.data.name
          break
          // 编辑
        case 2:
          this.deptForm = this.currentNodeInfo
          this.deptFormShow = this.currentDeptInfo
          this.userFormShow = false
          this.deptOnlyRead = false
          break
          // 删除
        default:
          this.messageBox('确认删除？').then((c) => {
            if (c.action) {
              deptDelete({id: this.currentNode.data.id}).then(
                  (res) => {
                    if (res.success) {
                      this.message(res.msg, 1)
                      this.currentNode.operationType = 0
                      this.currentNode.highLightId = this.currentDeptInfo.id
                      this.$refs.deptTree.refreshNode(
                          this.currentNode
                      )
                      if (
                          this.currentDeptInfo.id ===
                          this.currentNodeInfo.id
                      ) {
                        this.deptForm = {}
                        this.currentDeptInfo = {}
                        this.currentNodeInfo = {}
                      }
                    } else this.message(res.msg, 3)
                  }
              )
            }
          })
      }
    },
    // 部门属性 保存
    deptSave() {
      let newDeptInfo = JSON.parse(JSON.stringify(this.deptForm))
      if (!newDeptInfo.name) {
        this.message('请输入部门名称', 3)
        return
      }
      if (!newDeptInfo.isSealup && newDeptInfo.isSealup != 0) {
        this.message('请选择部门状态', 3)
        return
      }
      if (newDeptInfo.grade === 1 && !newDeptInfo.deptType) {
        this.message('请选择单位类型', 3)
        return
      }
      if (this.operationType === 1) {
        newDeptInfo.parentId = this.currentNodeInfo.id
        this.currentNode.operationType = 1
      } else {
        newDeptInfo.parentId = this.currentNodeInfo.parentId
        this.currentNode.operationType = 0
      }
      deptSave(newDeptInfo).then((res) => {
        if (res.success) {
          if (!newDeptInfo.id) {
            this.tableData = []
            this.currentNode.highLightId = res.info
            this.deptForm.id = res.info
          } else {
            this.currentNode.highLightId = this.currentNodeInfo.id
          }
          this.$refs.deptTree.refreshNode(this.currentNode)
          this.deptOnlyRead = true
          this.message(res.msg, 1)
        } else {
          this.message(res.msg, 3)
          return
        }
      })
    },
    // 部门属性 取消
    deptCancel() {
      this.deptForm = this.currentDeptInfo
      this.deptOnlyRead = true
    },
    // 人员列表
    getUserList(id) {
      userList({deptId: id}).then((res) => {
        if (res.success) {
          this.tableData = JSON.parse(JSON.stringify(res.info))
        } else this.message(res.msg, 3)
      })
    },
    // 人员点击行
    async rowClick(row) {
      this.activeName = 'routine'
      this.userFormShow = true
      this.deptFormShow = false
      this.userForm = row
      this.userOnlyRead = true
    },
    rowStyle(row) {
      if (!row.row.isSealup) {
        return {color: 'rgba(249, 73, 99, 1)'}
      }
    },
    // 人员勾选
    handleSelectionChange(e) {
      this.currentUsers = JSON.parse(JSON.stringify(e))
    },
    // 人员清空勾选
    resetChecked() {
      this.$refs.table.setCheckedKeys([])
    },
    // 人员编辑
    async userEdit() {
      if (this.currentUsers.length == 0) {
        this.message('请选择需要编辑的人员', 3)
      } else if (this.currentUsers.length > 1) {
        this.message('不能同时编辑多个人员', 3)
      } else {
        let detail = await userDetail({id: this.currentUsers[0].id})
        this.userForm = detail.info
        if (this.userForm.headPic) {
          this.headPicSrc = this.serverAPI + this.userForm.headPic
        } else {
          this.headPicSrc = ''
        }
        this.deptFormShow = false
        this.userFormShow = true
        this.userOnlyRead = false
      }
    },
    // 人员删除
    userDelete() {
      if (!this.currentUsers.length) {
        this.message('请选择需要删除的人员', 3)
      } else {
        this.messageBox('确认删除？').then((c) => {
          if (c.action) {
            let ids = this.currentUsers[0].id
            if (this.currentUsers.length > 1) {
              for (let i = 1; i < this.currentUsers.length; i++) {
                ids = ids + ',' + this.currentUsers[i].id
              }
            }
            userDelete({ids: ids}).then((res) => {
              if (res.success) {
                this.message(res.msg, 1)
                this.getUserList(this.deptForm.id)
                this.userFormShow = false
                this.deptFormShow = true
              } else this.message(res.msg, 3)
            })
          } else {
            this.resetChecked()
          }
        })
      }
    },
    // 人员新增
    userAdd() {
      if (!this.deptForm.id) {
        this.message('请先选择部门', 3)
      } else {
        this.userFormShow = true
        this.deptFormShow = false
        this.userForm = {
          deptName: this.deptForm.name,
          deptId: this.deptForm.id,
          isSealup: 1,
        }
        this.userOnlyRead = false
      }
    },
    // 人员编辑取消
    async userCancel() {
      this.userFormShow = false
      this.deptFormShow = true
      this.userOnlyRead = true
    },
    // 人员保存
    userSave() {
      let datas = JSON.parse(JSON.stringify(this.userForm))
      if (!datas.name) {
        this.message('请输入姓名', 3)
        return
      }
      if (!datas.account) {
        this.message('请输入账号', 3)
        return
      }
      if (!datas.code) {
        this.message('请输入工号', 3)
        return
      }
      if (datas.phone) {
        if (!this.checkPhone(datas.phone)) {
          this.message('手机号有误，请重填', 3)
          return
        }
      }
      if (datas.telephone) {
        if (!this.checkTelephone(datas.telephone)) {
          this.message('电话号码有误，请重填', 3)
          return
        }
      }
      if (datas.pwdMinLen) {
        if (isNaN(datas.pwdMinLen)) {
          this.message('密码最小长度为数字', 3)
          return
        } else if (!Number.isInteger(Number(datas.pwdMinLen))) {
          this.message('密码最小长度为整数', 3)
          return
        }
      }
      userSave(datas).then((res) => {
        if (res.success) {
          this.message(res.msg, 1)
          this.getUserList(this.deptForm.id)
          setTimeout(() => {
            userDetail({id: res.info}).then((res) => {
              this.userForm = res.info
              this.userOnlyRead = true
            })
          })
        } else {
          this.message(res.msg, 3)
          return
        }
      })
    },
    // 手机号校验
    checkPhone(phone) {
      let myreg = /^[1][3,4,5,7,8][0-9]{9}$/
      if (!myreg.test(phone)) {
        return false
      } else {
        return true
      }
    },
    // 电话号码校验
    checkTelephone(telephone) {
      let myreg = /^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/
      if (!myreg.test(telephone)) {
        return false
      } else {
        return true
      }
    },
    // 人员属性上传头像
    // changeFile(file) {
    // 	this.userForm.fileContent = ''
    // 	this.headPicSrc = ''
    // 	const self = this
    // 	let reader = new FileReader()
    // 	reader.readAsDataURL(file.raw)
    // 	let img_base64
    // 	reader.onload = function(event) {
    // 		img_base64 = this.result
    // 	}
    // 	setTimeout(() => {
    // 		this.userForm.fileContent = img_base64
    // 		this.headPicSrc = img_base64
    // 	}, 100)
    // },
    async loadNode(node, resolve) {
      let id = ''
      if (node.level === 0) {
        id = 0
      } else id = node.data.id
      deptOrUserTree({parentId: id}).then((res) => {
        if (res.code == 200) {
          if (res.success) {
            return resolve(res.info)
          } else this.message(res.msg, 3)
        } else this.message(res.msg, 3)
      })
    },
    handleNodeClick(e) {
      this.deptForm.parentDept = e.name
      this.deptForm.parentId = e.id
      this.$refs.mySelect.handleClose()
      this.currentNode.rootNode = 1
    },
    userHandleNodeClick(e) {
      this.userForm.deptName = e.name
      this.userForm.deptId = e.id
      this.$refs.myUserSelect.handleClose()
    },
    handleClick(e) {
      this.userButtons = false
      switch (Number(e.index)) {
        case 0:
          this.userButtons = true
          break
        case 1:
          userRole({userId: this.userForm.id}).then((res) => {
            if (res.success) {
              if (res.info.length) {
                this.userRoleList = JSON.parse(
                    JSON.stringify(res.info)
                )
              }
            } else this.message(res.msg, 3)
          })
          break
        default:
          userAut({userId: this.userForm.id}).then((res) => {
            if (res.success) {
              if (res.info) {
                this.userAutList = JSON.parse(
                    JSON.stringify(res.info)
                )
              }
            } else this.message(res.msg, 3)
          })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.organizationContent-wrapper {
  width: 100%;
  height: 100%;

  .left-deptTree,
  .right-info {
    text-align: left;

    .title {
      text-align: left;
      display: inline-block;
      position: relative;
      font-size: 16px;
      font-weight: bold;
      color: var(--organization-tabs-text-color);

      &::before {
        content: '';
        display: block;
        width: 4px;
        height: 20px;
        background: rgba(83, 167, 255, 1);
        border-radius: 2px;
        position: absolute;
      }
    }
  }

  .left-deptTree {
    height: 100%;
    float: left;
    width: 260px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    overflow: auto;

    .title {
      height: 52px;
      line-height: 52px;
      padding-left: 28px;
      margin-bottom: 0;
      width: 100%;

      &::before {
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }

  .center-userList {
    height: 100%;
    width: calc(100% - 630px);
    float: left;
    border-radius: 6px;
    margin: 0 12px;

    .buttons-wrapper {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 12px 20px;

      .left-buttons {
        float: left;
        display: flex;
        flex-direction: row;

        span {
          margin-right: 10px;
        }
      }

      .right-buttons::before {
        display: none;
      }
    }

    .el-table {
      height: calc(100% - 52px);

      ::v-deep.el-table__body-wrapper {
        height: calc(100% - 48px);
      }
    }
  }

  .right-info {
    height: 100%;
    float: left;
    width: 346px;
    border-radius: 6px;
    position: relative;

    &.devProperty-wrapper {
      .title {
        margin: 16px;
        width: calc(100% - 32px);
        padding-left: 8px;
        padding-bottom: 19px;
        border-bottom: 2px solid var(--organization-title-underline-color);

        &::before {
          left: 0;
          transform: translateX(-100%);
        }
      }

      .el-form {
        padding: 0 20px;
      }
    }

    &.userProperty-wrapper {
      .title {
        margin: 16px;
        padding-left: 8px;

        &::before {
          left: 0;
          transform: translateX(-100%);
        }
      }

      .el-tabs {
        height: calc(100% - 110px);
        overflow: hidden;

        ::v-deep.el-tabs__header {
          padding: 0 20px;
        }

        ::v-deep.el-tabs__content {
          height: 90%;
          overflow: auto;
          width: 100%;

          .el-tab-pane {
            padding: 0 20px;

            &#pane-aut .autList,
            &#pane-role .roleList {
              background: var(--organization-person-role-bgc);
              border-radius: 4px;
              margin-bottom: 12px;
              border-radius: 4px;
              text-align: left;
              padding: 10px 20px;
              color: var(--organization-person-role-text-color);
              border: 1px solid var(--organization-person-role-border-color);
            }
          }
        }
      }
    }

    .el-form .el-form-item {
      .systemInput {
        ::v-deep.el-input input {
          text-align: left;
        }

        &.is-disabled ::v-deep input::placeholder {
          color: transparent;
        }
      }

      &.multipleRows {
        height: 40px;

        ::v-deep.el-form-item__label {
          line-height: 20px;
        }
      }

      &.headPic {
        height: 206px;

        ::v-deep.el-form-item__content {
          // .avatar-uploader .el-upload {
          // 	border: 1px dashed #d9d9d9;
          // 	border-radius: 6px;
          // 	cursor: pointer;
          // 	position: relative;
          // 	overflow: hidden;
          // }
          // .avatar-uploader .el-upload:hover {
          // 	border-color: #409eff;
          // }
          // .avatar-uploader-icon {
          // 	font-size: 28px;
          // 	color: #8c939d;
          // 	width: 206px;
          // 	height: 206px;
          // 	line-height: 206px;
          // 	text-align: center;
          // }
          .avatar {
            width: 206px;
            height: 206px;
            display: block;
            border: 1px solid rgba(16, 28, 76, 0.4);
            border-radius: 50%;
          }
        }
      }
    }

    .buttons-wrapper {
      position: absolute;
      bottom: 10px;
      right: 20px;

      span {
        margin-left: 20px;
      }
    }
  }
}
</style>
